<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>login</title>
    <link rel="icon" href="../images/logo.ico">
    <style>
        body{
            overflow: hidden;
            background-color: #F7E8ED;
        }
        .block {
            width: 400px;
            height: 400px;
            margin: 200px auto;
            border: 1px solid black;
        }

        .logo {
            width: 150px;
            height: 50px;
            margin: 50px auto 0 auto;
            text-align: center;
        }

        .logo h2 {
            display: inline;
        }

        form {
            margin: 0 auto;
            width: 200px;
            text-align: center;
        }

        form div {
            margin: 20px auto;
        }

        form div label {
            display: inline;
            text-align: right;
            width: 40px;
        }

        form div input:not(.btn) {
            display: inline;
            width: 150px;
        }

        .btn {
            width: 80px;
            height: 30px;
            font-family: "宋体";
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div class="block">
        <div class="logo">
            <h2>登录</h2>
            <a href="reister.html">注册/注销</a>
        </div>
        <form id="sub">
            <div>
                <label for="user">账号</label>
                <input type="text" id="user">
            </div>
            <div>
                <label for="password">密码</label>
                <input type="password" id="password">
            </div>
            <div>
                <input class="btn" type="submit">
                <input type="reset" class="btn">
            </div>
        </form>
    </div>
</body>
<script src="../js/jquery-3.3.1.js"></script>
<script src="../js/cookie.js"></script>
<script>
    var submitBtn = document.querySelector("[type=submit]");
    var form = document.getElementById('sub');

    submitBtn.onclick = function (e) {
        e.preventDefault();
        var account = form.user.value;
        var pass = form.password.value;
        var data ={
            account:account,
            pass:pass
        }
        $.ajax({
            type: "POST",
            data:data,
            url: "../php/login.php",
            success: function (res) {
                if (res.status){
                    alert("登录成功");
                    setCookie("username",account,9999999999);
                    
                    location.href="../show.html"
                }else {
                    if(res.msg=="找不到该用户"){
                        var it=confirm("是否前往注册");
                        it?(location.href="reister.html"):console.log("已取消");
                    }else{
                        alert(res.msg);
                    }
                }


            },
            error: function (res) {
                console.warn(res.responseText);
                alert("请求失败！");
            }
        })
    }
</script>

</html>